<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>

			   
			   /*练习：1 圆形 2.正三角形
			   思路1：宽高与边框倒角一致
			   思路2：div#d1   css中：抓到div    【斜线】
			                                 左边框：50像素实线红色
			                                 右边框：50像素实线黄色
											 下边框：50像素实线黑色
											 注意：先别加宽高 transparent 透明色
			   
			   */
			  
			  div{
				  width: 400px;
				  height: 400px;
				  border: 1px solid red;
				  border-radius: 50%;
				  /* 边框阴影 box-shadow 属性 */
				  box-shadow: 5px 5px 50px 50px red inset;
			  }
			div#triangle{
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid black;
				
			/* 两行：倒三角 蓝色 透明度 .3 
			提醒：所有边框 50PX solid transparent
			  上边框颜色改成蓝色 0，0，255*/
			  
			  border: 50px solid transparent;
			  border-right-color: rgba(0, 0,255, .3);
			}
			input{
				outline: 1px solid red;
			}
		
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>